<template lang="">
    <div id='yi' >
        <div class='er'>
            <form class='forms' @submit.prevent='submits()'> 
            账号:<input v-model='zhanghao' @focus='hanshu()' @blur='hanshu1()' :class='{add}' /><br>
            密码:<input v-model='mima'  @focus='hanshu2()' @blur='hanshu3()' :class='{app}' /><br>
               <button class='anniu'>登入</button>

        </form>
         
        </div>
         <div class='yuan'></div>
         <div class='yuan1'></div>

    </div>
   
</template>

<script>

export default {
    data() {
        return {
            zhanghao:'请输入账号.....',
            mima:'请输入密码.....',
            add:false,
            app:false
        }
    },
    methods: {
        submits(){
          
            if(this.zhanghao === 'admin' && this.mima === '123456'){

                this.$router.push('/dome1')

            }else if( ! this.zhanghao|| ! this.mima ){

                alert('账号或密码不能为空')
                  this.zhanghao = ''
                  this.mima = ''
            } else{

                alert('账号密码错误')
                 this.zhanghao = ''
                this.mima = ''
            }
        },
        hanshu(){
          
            this.add=true
            this.zhanghao=''
         
             
        },
        hanshu1(){
            this.add=false
            if(this.zhanghao === ''){
                 this.zhanghao = '请输入账号.....'
            }

             
        },
        hanshu2(){
            this.app=true
            this.mima=''
        },
          hanshu3(){
            this.app=false
            if(this.mima === ''){
                 this.mima = '请输入密码.....'
            }
        }
    }
 
}
</script>
<style lang="scss" scoped>
*{
    padding: 0%;
    margin: 0%;
}
.er{
 display: flex;
     justify-content: center;
     padding-top: 14%;
}
.forms{
     z-index: 999;
     background-color: rgb(255, 255, 255,0.8);
     box-shadow: 1px 1px 19px rgba(0, 0, 0, 0.954);
     color: rgb(0, 0, 0);
     border-radius: 20px;
    width: 300px;
        height: 350px;
        text-align: center;
        // align-content: center;
        // line-height: 90px;
       
        
}
     #yi{
        background-color: rgb(0, 0, 0);
        width: 100%;
        height: 100vh;
     }
     :hover.anniu{
        background-color: rgb(212, 208, 208);
     }
     button{
        width: 100px;
        height: 30px;
       margin-top:90px;
       border-radius: 15px;
     }
     .forms>input{
         border-radius: 15px;
       margin-top: 60px;
         
        height: 25px;
     }
     .yuan{
        width: 200px;
        height: 200px;
        background-color: rgb(127, 255, 236 ,0.8);  
        box-shadow: 1px 1px 15px rgba(255, 255, 255, 0.954);
        border-radius: 50%;
        position: absolute;
        top: 14%;
        left: 33%;
     }
      .yuan1{
        width: 200px;
        height: 200px;
        background-color: rgb(0, 229, 255 ,0.8);  
        box-shadow: 1px 1px 15px rgba(255, 255, 255, 0.954);

        border-radius: 50%;
        position: absolute;
        top: 56%;
        left: 53%;
     }
     .add{
        background-color: rgb(226, 226, 226);
     }
       .app{
        background-color: rgb(226, 226, 226);
     }
</style>